<template>
    <el-tabs style='margin-left: 10px'>
        <el-tab-pane label='已激活企业列表'>
            <div class='container'
                 v-loading="Tloading"
                 element-loading-text="正在加载一大波数据，请稍后···"
                 element-loading-background="rgba(0, 0, 0, 0.8)"
                 element-loading-spinner="el-icon-loading">
                <el-form ref='form' :model='filterForm'>
                    <el-form-item>
                        <el-select
                                v-model='filterForm.timeScope'
                                placeholder='全部'
                                filterable
                                clearable
                                style='width: 200px;'
                        >
                            <el-option
                                    v-for='item in timeScopes'
                                    :key='item.id'
                                    :label='item.name'
                                    :value='item.id'
                            ></el-option>
                        </el-select>
                        <el-input
                                v-model='filterForm.name'
                                placeholder='企业名称'
                                class='normal-input'
                                style='width: 175px; margin-left: 10px;'
                        ></el-input>
                        <el-button
                                class='filter-item'
                                type='primary'
                                plain
                                icon='el-icon-search'
                                @click='handleFilter(0)'
                                style='margin-left: 10px;'
                        >筛选
                        </el-button>
                        <el-button
                                class='filter-item'
                                type='primary'
                                plain
                                icon='el-icon-refresh'
                                @click='handleFilter(1)'
                                style='margin-left: 10px;'
                        >重置
                        </el-button>
                        <el-button
                                class='filter-item'
                                type='primary'
                                plain
                                icon='el-icon-document'
                                @click='handleExcel'
                                style='float: right;'
                        ><strong>导出</strong> [ 激活企业第 <span style="color:indianred;">{{pageCurrent}}</span> 页 / <span style="color:indianred;">{{companyList.length}}</span> 条 ] 数据
                        </el-button>
                    </el-form-item>
                </el-form>
                <div class='pagination-container'>
                    <el-pagination
                            background
                            layout='total, prev, pager, next,sizes'
                            :page-sizes="[1000]"
                            @size-change="handleSizeChange"
                            :total='total'
                            :page-count='count'
                            :current-page='pageCurrent'
                            @current-change='handleCurrentChange'
                    ></el-pagination>
                </div>
                <br/>
                <el-table :data='companyList'>
                    <el-table-column prop='companyrName' label='单位名称'></el-table-column>
                    <el-table-column prop='address' label='地址'></el-table-column>
                    <el-table-column prop='name' label='订单专管员'></el-table-column>
                    <el-table-column prop='phone' label='专管员手机'></el-table-column>
                    <el-table-column prop='contact' label='企业负责人'></el-table-column>
                    <el-table-column prop='contactphone' label='联系电话'></el-table-column>
                </el-table>
            </div>
        </el-tab-pane>
        <el-tab-pane label='未激活企业列表'>
            <div class='container'
                 v-loading="Tloading2"
                 element-loading-text="正在加载一大波数据，请稍后···"
                 element-loading-background="rgba(0, 0, 0, 0.8)"
                 element-loading-spinner="el-icon-loading">
                <el-form ref='form' :model='filterFormN'>
                    <el-form-item>
                        <el-input
                                v-model='filterFormN.name'
                                placeholder='企业名称'
                                class='normal-input'
                                style='width: 175px; margin-left: 10px;'
                        ></el-input>
                        <el-button
                                class='filter-item'
                                type='primary'
                                plain
                                icon='el-icon-search'
                                @click='handleFilterN(0)'
                                style='margin-left: 10px;'
                        >筛选
                        </el-button>
                        <el-button
                                class='filter-item'
                                type='primary'
                                plain
                                icon='el-icon-refresh'
                                @click='handleFilterN(1)'
                                style='margin-left: 10px;'
                        >重置
                        </el-button>
                              <el-button
                                class='filter-item'
                                type='primary'
                                plain
                                icon='el-icon-document'
                                @click='handleExcelN'
                                style='float: right;'
                        ><strong>
                              导出</strong> [ 未激活企业第 <span style="color:indianred;">{{pageCurrentN}}</span> 页 / <span style="color:indianred;">{{companyListN.length}}</span> 条 ] 数据
                              </el-button>
                        <el-button
                                class='filter-item'
                                type='primary'
                                plain
                                icon='el-icon-plus'
                                @click='handleCreate'
                                style='float: right;'
                        >新增企业
                        </el-button>
                    </el-form-item>
                </el-form>
                <div class='pagination-container'>
                    <el-pagination
                            background
                            layout='total, prev, pager, next,sizes'
                            :page-sizes="[1000]"
                            @size-change="handleSizeChangeN"
                            :total='totalN'
                            :page-count='countN'
                            :current-page='pageCurrentN'
                            @current-change='handleCurrentChangeN'
                    ></el-pagination>
                </div>
                <br/>
                <el-table :data='companyListN' border fit el-tabl stripe id='table-dataN' style='width: 100%;'>
                    <el-table-column prop='id' align='center' label='编号' width='0' v-if='false'></el-table-column>
                    <el-table-column prop='companyrName' align='center' min-width='100px' label='单位名称'></el-table-column>
                    <el-table-column prop='address' align='center' min-width='150px' label='地址'></el-table-column>
                    <el-table-column prop='tradeMode' align='center' min-width='100px' label='贸易方式'></el-table-column>
                    <el-table-column prop='responPerson' align='center' min-width='70px' label='负责人'></el-table-column>
                    <el-table-column prop='responPersonOfficePhone' align='center' min-width='80px' label='联系电话'></el-table-column>
                    <el-table-column prop='responPersonPhone' align='center' min-width='80px' label='负责人手机'></el-table-column>
                    <!--<el-table-column align='center' label='操作'>
                      <template slot-scope='scope'>
                        <el-button size='mini' type='danger' @click='handleDelete(scope.$index, scope.row)'>删除</el-button>
                      </template>
                    </el-table-column>-->
                </el-table>
                <div class='pagination-container' v-show="false">
                    <el-pagination
                            background
                            layout='total, prev, pager, next,sizes'
                            :page-sizes="[1000]"
                            @size-change="handleSizeChangeN"
                            :total='totalN'
                            :page-count='countN'
                            :current-page='pageCurrentN'
                            @current-change='handleCurrentChangeN'
                    ></el-pagination>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
    import {getCorpList, getCorpListN, resetPassWord, delData} from '@/api/corp';
    import FileSaver from 'file-saver';
    import XLSX from 'xlsx';

    export default {
        data() {
            return {
                Tloading:true,
                Tloading2:true,
                pSize:1000,
                pSizeN:1000,
                filterForm: {
                    timeScope: '',
                    name: ''
                },
                filterFormN: {
                    name: ''
                },
                timeScopes: [
                    {
                        id: '365',
                        name: '1年无提交'
                    },
                    {
                        id: '180',
                        name: '6月无提交'
                    },
                    {
                        id: '90',
                        name: '3个月无提交'
                    },
                    {
                        id: '30',
                        name: '1个月无提交'
                    },
                    {
                        id: '15',
                        name: '半个月无提交'
                    }
                ],
                companyList: [],
                filter: false,
                total: 0,
                count: 0,
                pageCurrent: 1,
                size: 100,
                companyListN: [],
                filterN: false,
                totalN: 0,
                countN: 0,
                pageCurrentN: 1,
                sizeN: 100
            };
        },
        created() {
            this.initCorpList('1', this.pSize);
            this.initCorpListN('1',this.pSizeN);
        },
        methods: {
            handleSizeChange(val) {
                this.pSize = val;
                this.initCorpList('1', this.pSize);
                console.log(`每页 ${val} 条`);
            },
            handleSizeChangeN(val) {
                this.pSizeN = val;
                this.initCorpListN('1', this.pSizeN);
                console.log(`每页 ${val} 条`);
            },
            handleDelete(index, row) {
                let id = row.id;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delData(id).then(res => {
                        if (res.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initCorpList('1');
                            this.initCorpListN('1');
                        } else {
                            this.$message({
                                type: 'success',
                                message: res.msg
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            handleExcel() {

                /* generate workbook object from table */
                var wb = XLSX.utils.table_to_book(document.querySelector('#table-data'));
                /* get binary string as output */
                var wbout = XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: true,
                    type: 'array'
                });
                try {
                    FileSaver.saveAs(
                        new Blob([wbout], {type: 'application/octet-stream'}),
                        `激活企业第${this.pageCurrent}页数据_${this.companyList.length}条.xlsx`
                    );
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            },
            handleCreate() {
                this.$router.push({
                    path: '/user/usercreate',
                    query: {id: Math.random()}
                });
            },
            handlePass(row) {
                console.log('handlePass ', row);
                resetPassWord(row.id)
                    .then(res => {
                        if (res.code == 0) {
                            this.$message({
                                message: '密码重置成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
                //重置密码
            },
            handleFilter(type) {
                //搜索数据
                if (type == 0) {
                    this.filter = true;
                    this.initCorpList('1',this.pSize);
                } else {
                    this.filter = false;
                    this.filterForm.timeScopes = '';
                    this.filterForm.name = '';
                    this.initCorpList('1',this.pSize);
                }
            },
            // 当前的页码，改变时会触发
            handleCurrentChange: function (currentPage) {
                this.initCorpList(currentPage, this.pSize);
            },
            handleView(row) {
                localStorage.setItem('corpID', row.id);
                this.$router.push({path: '/area/companyorder', query: {id: row.id}});
            },
            initCorpList(pageID, pageLimit) {
                this.Tloading=true;
                let that = this;
                var name = '';
                var timeScope = '';
                if (this.filter == true) {
                    name = this.filterForm.name;
                    timeScope = this.filterForm.timeScope;
                }
                //刷新页面
                that.loading = true;
                getCorpList(pageID, name, timeScope, pageLimit)
                    .then(data => {
                        that.loading = false;
                        var myData = data.data;
                        var pageData = data.page;
                        that.total = pageData.resultCount;
                        that.count = pageData.pageCount;
                        that.pageCurrent = pageData.pageCurrent;
                        that.size = pageData.pageLimit;
                        if (myData.length <= 0) {
                            var lenth = that.companyList.length;
                            that.companyList.splice(0, lenth);
                            that.count = data.page.pageCurrent;
                            that.pageCurrent = data.page.pageCount
                            that.total = data.page.pageCount
                        } else {
                            lenth = that.companyList.length;
                            that.companyList.splice(0, lenth);
                            //加入数据内容
                            for (let i of myData) {
                                var map = {
                                    id: i.id,
                                    companyrName: i.companyHsName,
                                    address: i.address,
                                    name: i.contactsName,
                                    phone: i.contactsPhone,
                                    contactphone: i.eb1,
                                    contact: i.eb2
                                };
                                that.companyList.push(map);

                            }
                            var pageData = data.page;
                            that.total = pageData.resultCount;
                            that.count = pageData.pageCount;
                            that.pageCurrent = pageData.pageCurrent;
                            that.size = pageData.pageLimit;
                        }
                        that.Tloading = false;
                    })
                    .catch(function (error) {
                        console.log(error);
                        that.loading = false;
                        that.Tloading = false;
                    });
            },
            //未注册企业
            handleExcelN() {
                /* generate workbook object from table */
                var wb = XLSX.utils.table_to_book(document.querySelector('#table-dataN'));
                /* get binary string as output */
                var wbout = XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: true,
                    type: 'array'
                });
                try {
                    FileSaver.saveAs(
                        new Blob([wbout], {type: 'application/octet-stream'}),
                        `未激活企业第${this.pageCurrentN}页数据_${this.companyListN.length}条.xlsx`
                    );
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            },
            handleFilterN(type) {
                //搜索数据
                if (type == 0) {
                    this.filterN = true;
                    this.initCorpListN('1',this.pSizeN);
                } else {
                    this.filterN = false;
                    this.filterFormN.name = '';
                    this.initCorpListN('1',this.pSizeN);
                }
            },
            // 当前的页码，改变时会触发
            handleCurrentChangeN: function (currentPage) {
                this.initCorpListN(currentPage,this.pSizeN);
            },
            initCorpListN(pageID,pageLimit) {
                this.Tloading2=true;
                let that = this;
                var name = '';
                if (this.filterN == true) {
                    name = this.filterFormN.name;
                }
                //刷新页面
                that.loading = true;
                getCorpListN(pageID, name,pageLimit)
                    .then(data => {
                        that.loading = false;
                        var myData = data.data;
                        if (myData.length <= 0) {
                            var lenth = that.companyListN.length;
                            that.companyListN.splice(0, lenth);
                        } else {
                            lenth = that.companyListN.length;
                            that.companyListN.splice(0, lenth);
                            //加入数据内容
                            for (let i of myData) {
                                var map = {
                                    id: i.id,
                                    companyrName: i.companyName,
                                    address: i.address,
                                    tradeMode: i.tradeMode,
                                    responPerson: i.responPerson,
                                    responPersonOfficePhone: i.responPersonOfficePhone,
                                    responPersonPhone: i.responPersonPhone
                                };
                                console.log('id = ', map.id);
                                that.companyListN.push(map);
                            }

                        }
                        var pageData = data.page;
                        that.totalN = pageData.resultCount;
                        that.countN = pageData.pageCount;
                        that.pageCurrentN = pageData.pageCurrent;
                        that.sizeN = pageData.pageLimit;
                        this.Tloading2=false;
                    })
                    .catch(function (error) {
                        console.log(error);
                        that.loading = false;
                        that.Tloading2=false;
                    });
            }
        },
    };
</script>
<style>
</style>
